<template>
	<view class="body">
		<view class="titlebox">
			<view class="imgbox1">
				<view class="image1" @click="goToIndex">
					<image class="img1" src="../../static/hlg.png"></image>
				</view>
			</view>
			<view class="titletext">欢迎登录火龙果</view>
		</view>

		<view class="shurubox">
			<view class="shurukuang">
				<view class="shurukuang1">
					<view class="imagebox2">
						<view class="image2">
							<image class="img2" src="../../static/yonghuming.png"></image>
						</view>
					</view>
					<input type="text" class="shuruyonghuming" placeholder="请输入手机号" v-model="username">
					<view class="imagebox3" v-if="username">
						<view class="image3" @click="clearInput('username')">
							<image class="img3" src="../../static/qingchu.png"></image>
						</view>
					</view>
				</view>

				<view class="shurukuang2">
					<view class="imagebox2">
						<view class="image2">
							<image class="img2" src="../../static/mima.png"></image>
						</view>
					</view>
					<input :type="passwordVisibility ? 'text' : 'password'" class="shurumima" placeholder="请输入密码"
						v-model="password">
					<view class="imagebox3" v-if="password">
						<view class="image3" @click="clearInput('password')">
							<image class="img3" src="../../static/qingchu.png"></image>
						</view>
					</view>
					<view class="imagebox4" @click="togglePasswordVisibility">
						<view class="image4">
							<image class="img4"
								:src="passwordVisibility ? '../../static/显示.png' : '../../static/隐藏.png'">
							</image>
						</view>
					</view>
				</view>

			</view>
			<view class="error-message" v-if="errorMessage"></view>
		</view>

		<view class="jizhumimabox">
			<view class="jizhubox">
				<image class="imgbox5" @click="toggleCheckbox"
					:src="isChecked ? '../../static/复选框选中.png' : '../../static/复选框默认.png'">
				</image>
				<view class="jizhumima">记住密码</view>
			</view>
			<view class="tips" v-if="!isChecked">请勾选【记住密码】，方便下次登录</view>
		</view>

		<button :style="{background: isButtonActive ? '#e23234' : 'rgba(224, 40, 38, .4)'}" @click="login">立即登录</button>

		<view class="wangjimima" @click="goToWangjimima">忘记密码？</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				passwordVisibility: false,
				rememberMe: false,
				isButtonActive: false,
				errorMessage: '',
				isChecked: false, // 新增状态变量
			};
		},
		methods: {
			// 测试方便跳转到首页的方法
			goToIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 首页路径
				});
			},
			goToWangjimima() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.navigateTo({
					url: '/pages/wangjimima/wangjimima', // 首页路径
				});
			},



			clearInput(type) {
				this[type] = '';
				this.checkInput(); // 检查输入状态
			},
			togglePasswordVisibility() {
				this.passwordVisibility = !this.passwordVisibility;
			},
			toggleCheckbox() {
				this.isChecked = !this.isChecked;
				this.rememberMe = this.isChecked; // 同步记住密码的状态
			},
			checkInput() {
				this.isButtonActive = this.username && this.password;
				if (!this.username) {
					this.errorMessage = '请输入手机号';
				} else if (!this.password) {
					this.errorMessage = '请输入密码';
				} else if (this.username !== '13083936558' || this.password !== '123123') {
					this.errorMessage = '手机号或密码错误，请重新输入';
				} else {
					this.errorMessage = '';
				}
			},
			login() {
				console.log('------------------login----------------')
				this.checkInput(); // 检查输入
				if (this.errorMessage) {
					// 如果有错误信息，则显示错误信息
					uni.showToast({
						title: this.errorMessage,
						icon: 'none',
						duration: 2000
					});
					return;
				}
				// 如果输入正确，跳转到指定页面
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		watch: {
			username(newVal) {
				this.checkInput();
			},
			password(newVal) {
				this.checkInput();
			}
		}
	};
</script>

<style>
	.body {
		background: linear-gradient(180deg, #fff, #fff0f0);
		height: 100vh;
	}

	.titlebox {
		width: 100%;
		height: 40vh;
	}

	.imgbox1 {
		width: 100%;
		padding-top: 20%;
		padding-bottom: 3%;
	}

	.image1 {
		width: 76px;
		margin: 0 auto;
	}

	.img1 {
		width: 100%;
		height: 76px;
	}

	.titletext {
		font-size: 22px;
		font-weight: 600;
		color: #111;
		text-align: center;
	}

	.shurubox {
		width: 90%;
		margin: auto;
	}

	.shurukuang {
		width: 90%;
		margin: 0 auto;
	}

	.shurukuang1,
	.shurukuang2 {
		/* 	display: flex;
		background: white;
		width: 90%;
		padding: 5%;
		border-bottom: 1px solid #eee; */
		display: flex;
		background: white;
		width: 90%;
		padding: 5%;
		border-bottom: 1px solid #eee;
		align-items: center;
	}

	/* 	.imagebox2,
	.imagebox3,
	.imagebox4 {
		width: 10%;
		padding-right: 3%;
	} */

	.image2,
	.image3,
	.image4 {
		width: 20px;
		margin-right: 8px;
		display: block;
	}

	.img2,
	.img3 {
		width: 100%;
		height: 20px;
	}

	.img4 {
		width: 24px;
		height: 24px;
		display: block;
	}

	input {
		width: 82%;
	}

	/* 记住密码部分 */
	.jizhumimabox {
		width: 73%;
		padding: 5%;
		margin: 0 auto;
	}

	.jizhubox {
		display: flex;
	}

	.imgbox5 {
		/* border: 0.5rpx solid #c0c4cc; */
		width: 34rpx;
		height: 34rpx;
		background-size: cover;
		/* 确保图片覆盖整个盒子 */
		background-repeat: no-repeat;
		/* 确保图片不重复 */
		background-position: center;
		/* 确保图片居中显示 */
		margin-right: 2%;
		border-radius: 2px;
	}

	.jizhumima {
		color: rgb(102, 102, 102);
		font-size: 25rpx;
	}

	.tips {
		font-weight: 500;
		color: #2979ff;
		line-height: 18px;
		font-size: 25rpx;
	}

	button {
		width: 80%;
		background: rgba(224, 40, 38, .4);
		margin: 0 auto;
		color: white;
		transition: background-color 0.3s;
	}

	.wangjimima {
		width: 80%;
		margin: 0 auto;
		color: red;
		text-align: right;
	}

	/* .error-message {
  color: red;
  text-align: center;
  margin-top: 20px;
} */
</style>
